
<template>
  <!-- 图标管理 -->
  <div>
    <!--<div class="crumbs">
        <el-breadcrumb separator="/">
            <el-breadcrumb-item><i class="el-icon-setting"></i>{{$t('Configuration')}}</el-breadcrumb-item>
              <el-breadcrumb-item>{{$route.meta.displayName}}</el-breadcrumb-item>
        </el-breadcrumb>
    </div>-->

    <el-row  type="flex"  :gutter="10">
      <el-col :span="24">
        <el-upload
          class="avatar-uploader"
          :action="uploadUrl"
          list-type="picture-card"
          :file-list="iconList"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
          :on-success= "hanldeSuccess">
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog v-model="dialogVisible" size="tiny">
          <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
      </el-col>
    </el-row>

    <el-row type="flex"  :gutter="10"  align="bottom">
      <el-col :span="24">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="pageSizes"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next"
          :total="total">
        </el-pagination>
      </el-col>
    </el-row>


</div>
</template>

<script>
  import IconService from 'api/config/iconmanager'
  import {
    API_BASEURL,
    API_TIMEOUT
  } from 'src/config'
  export default {
    data() {
      return {
        dialogImageUrl: '',
        dialogVisible: false,
        uploadUrl:API_BASEURL+'/dirms/monitor/image/upload',
        iconList:[],
        currentPage:1,
        total:0,
        pageSize:10,
        pageSizes:[10,20,30,50,100]
      };
    },
    methods: {

      handleSizeChange(val){
        this.pageSize = val ;
        this.pageQueryIconsData({},this.currentPage ,this.pageSize);
      },
      handleCurrentChange(val){
        this.currentPage = val ;
        this.pageQueryIconsData({},this.currentPage ,this.pageSize);
      },
      hanldeSuccess(response, file, fileList){
         if (response !=null){
           this.total = this.total+ 1;
           if (fileList.length > this.pageSize){
             this.currentPage = this.currentPage+ 1;
           }else if (fileList.length == 0){
             this.currentPage = this.currentPage - 1 > 0 ? (this.currentPage - 1):1;
           }
         }
      },
      handleRemove(file, fileList) {
        var self = this ;
        var confirmInfo ="是否删除图标:"+file.name;
        this.$confirm(confirmInfo, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            if (file.imageid !=null) {

              // var params = {
              // };
              // if (file.response !=null){
              //   params.id = file.response ;
              // }
              // if (file.id !=null){
              //   params.id = file.id ;
              // }
              // IconService.delIconDataById(params).then(response =>{
              IconService.delSysIconDataById(file.imageid).then(response =>{
                if (response.data.error) {
                  self.$message({
                    type: 'error',
                    message: response.data.error.data
                  });
                } else {
                  self.$message({
                    type: 'success',
                    message: '删除成功!'
                  });
                  self.total = self.total - 1 > 0 ? self.total - 1  : 0;
                }
                
                //刷新
                // self.pageQueryIconsData({},self.currentPage,self.pageSize);

              }).catch(err=>{
                self.$message({
                  type: 'error',
                  message: '删除失败!'
                });
              });
            }
          }).catch(() => {
            fileList.push(file);
            self.$message({
              type: 'info',
              message: '已取消删除'
            });
          });
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      handleAvatarSuccess(res, file) {
        this.imageUrl = URL.createObjectURL(file.raw);
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      },
      // getAllIcons(){
      //   var self = this;
      //   IconService.getAllIcons().then(response =>{
      //       console.log(response.data);
      //       let icons = [];
      //       response.data.forEach((item ,index,arr)=>{
      //         if (item.imageData!=null){
      //           item.url = "data:image/jpeg;base64,"+item.imageData;
      //           icons.push(item);
      //         };
      //       });
      //       self.iconList = icons;
      //   }).catch(err =>{
      //     console.log(err);
      //   });
      // },
      pageQueryIconsData(params = {},pageIndex,pageSize){
        var self = this;
        // IconService.pageQueryIconsData(params,pageIndex,pageSize).then(response =>{
        //   if (response.data!=null && response.data.errorCode == null){
        //     response.data.rows.forEach((item ,index,arr)=>{
        //       if (item.imageData!=null){
        //         item.url = "data:"+item.format+";base64,"+item.imageData;
        //         arr[index] = item;
        //       };
        //     });
        //     self.iconList = response.data.rows;
        //     self.currentPage = response.data.pageIndex ;
        //     self.pageSize = response.data.pageSize;
        //     self.total = response.data.total ;
        //   }

        IconService.pageQuerySysimageData(pageIndex,pageSize).then(response =>{
          if (response.data!=null && response.data.errorCode == null) {
            response.data.rows.forEach((item ,index,arr)=>{
              if (item.image!=null){
                // item.url = "data:image/png;base64,"+item.image;
                if (item.imageformat) {
                  item.url = "data:"+ item.imageformat +";base64,"+item.image;
                } else {
                  item.url = "data:image/png;base64,"+item.image;
                }
                
                arr[index] = item;
              };
            });
            self.iconList = response.data.rows;
            self.currentPage = response.data.pageIndex ;
            self.pageSize = response.data.pageSize;
            self.total = response.data.total ;
          }

        }).catch(err =>{
          self.$message({
            message:"图标查询出错",
            type:"error"
          });
        });
      }
    },
    mounted:function(){
      this.pageQueryIconsData({},1,10);
    }
  }
</script>

<style scoped>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #20a0ff;
  }
  .el-upload .picture-card{
    width: 64px;
    height: 64px;
  }

  .el-upload-list__item{
    width: 64px;
    height: 64px;
  }

  .el-upload__input {
    display: none!important;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 64px;
    height: 64px;
    line-height: 64px;
    text-align: center;
  }
  .avatar {
    width: 64px;
    height: 64px;
    display: block;
  }
</style>
